<div class='order-show container d-flex flex-column align-items-center flex-lg-wrap flex-lg-row justify-content-center' id="order_summary" data-hook>
  <% if order_just_completed?(@order) %>
    <%= icon(name: 'check-mark-circle',
             classes: 'd-block d-lg-none mx-auto order-show-check-mark',
             width: 56,
             height: 56) %>
    <%= icon(name: 'check-mark-circle',
             classes: 'd-none d-lg-block mx-auto order-show-check-mark',
             width: 102,
             height: 102) %>
    <h5 class="w-100 text-center"><%= Spree.t(:order_success) %></h5>
    <p class="order-show-explain w-100 text-center"><%= Spree.t(:order_success_explain) %></p>
  <% end %>

  <p class="order-show-number text-uppercase w-100 text-center">
    <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
  </p>
  <dl class="w-100 d-lg-flex justify-content-lg-between">
    <div>
      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:shipping_address) %></dt>
      <dd class="text-center text-lg-left">
        <%= render 'spree/shared/address', address: @order.ship_address %>
      </dd>
    </div>
    <div>
      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:billing_address) %></dt>
      <dd class="text-center text-lg-left">
        <%= render 'spree/shared/address', address: @order.bill_address %>
      </dd>
    </div>
    <div>
      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:shipping) %></dt>
      <% @order.shipments.valid.each do |shipment| %>
        <dd class="text-center text-lg-left">
          <%= shipment.shipping_method.name %>
          <%= link_to_tracking(shipment) if shipment.shipped? %>
        </dd>
      <% end %>
    </div>
    <div>
      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:payment) %></dt>
      <dd class="text-center text-lg-left">
        <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
      </dd>
    </div>
  </dl>
  <hr class="w-100 mt-0 mb-4 d-sm-none" />
  <div class="order-show-line-items d-flex flex-column align-items-center">
    <% @order.line_items.each do |item| %>
      <div class="order-show-line-items-line-item d-flex w-100">
        <%= link_to product_image(item.variant), item.product %>
        <div class="order-show-line-items-line-item-desc w-100">
          <span class="order-show-line-items-line-item-desc-name">
            <%= item.name %>
          </span>
          <span class="order-show-line-items-line-item-desc-subtitle text-break text-uppercase">
            <ul class="list-unstyled mb-0">
              <% item.variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
                <li><%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %></li>
              <% end %>
            </ul>
          </span>
          <div class="order-show-line-items-line-item-desc-price">
            <div class="order-show-line-items-line-item-desc-price-attr-name d-inline d-lg-block">
              <span><%= Spree.t(:price) %></span>
            </div>
            <span class="font-weight-bold"><%= item.single_money.to_html %></span>
          </div>
          <div class="order-show-line-items-line-item-desc-quantity">
            <div class="order-show-line-items-line-item-desc-quantity-attr-name d-inline d-lg-block">
              <span><%= Spree.t(:quantity) %></span>
            </div>
            <span class="order-show-line-items-line-item-desc-quantity-val d-lg-block"><%= item.quantity %></span>
          </div>
          <div class="order-show-line-items-line-item-desc-total">
            <div class="order-show-line-items-line-item-desc-total-attr-name d-inline d-lg-block">
              <span><%= Spree.t(:total) %></span>
            </div>
            <span class="font-weight-bold d-lg-block"><%= item.display_total.to_s %></span>
          </div>
        </div>
      </div>
    <% end %>
  </div>
  <hr class="w-100 mt-4 mb-0 d-sm-none" />
  <div id="checkout-summary" class="w-100" data-hook="checkout_summary_box">
    <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
  </div>
</div>
